<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head><title>WOTD History</title>

<!--
<script src="http://www.google.com/jsapi?key=ABQIAAAANU8OAqbJPAHXV4SpKuTEvhQx6TWrfC8bNfnC-vtzzHJYkwhD6xSt50-Z_44EojojRLDiBj3kn932Rw" type="text/javascript"></script>
-->
<!--
TODO:
    1) Need to conquer multiple queries 2) How do I check calendar for past WOTD? gcal goes back to epoch
	3) Automated accordion display
	4) Include QOTD - read from multiple calendars
	5) Each panel should have its own timer
    6) Separate positioning CSS from styling CSS
    7) after #6, produce several themes
	8) Get working with jsapi key??

  Panel Types:
    wotd
    last three days
    qotd
    announce
-->
<style type="text/css">
html, body  {height: 99%; font-family: "Trebuchet MS",sans-serif; background-color: #000000; color: #bbbbbd; text-align:center;}
.hugeItem  { font-size:230px; }
.largeItem  { font-size:168px; }
.mediumItem { font-size:96px; } 
.smallItem  { font-size:36px; }
.tinyItem  { font-size:18px; }
#container { position: relative; min-height: 100%; }
#footer { position: absolute; bottom: 10px; left: 0%; right: 0%; font-size:36px; }
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="date-en-US.js"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("gdata", "2.x", {packages: ["calendar"]});


var callback = function (result) {
    var entries = result.feed.getEntries();
    var pastWords = [ ];
    for (var i = 0; i < entries.length; i++) {
        pastWords.push(entries[i].getTitle().getText() + '<br/>');
    }
    
    $(function () {
        $('div.display').replaceWith(pastWords.join(''));
    });
};
    
// Error handler to be invoked when getEventsFeed() produces an error
var handleError = function (error) {
    $('div.display').replaceWith('<pre>' + error + '</pre>');
};

function _run() {
    var feedUrl = "https://www.google.com/calendar/feeds/u6g675oejpdha4pncv50rmi8tc%40group.calendar.google.com/public/full";
    var maxResults = 36500;

    var calendarService = new google.gdata.calendar.CalendarService('LiquidChicken-wotdDisplayer-1.0');
    var query = new google.gdata.calendar.CalendarEventQuery(feedUrl);
    query.setOrderBy('starttime');
    query.setSortOrder('descending');
    var minDate = new google.gdata.DateTime(Date.today().add({days: -3650}));
    query.setMinimumStartTime(minDate);
    query.setMaxResults(maxResults);

    calendarService.getEventsFeed(query, callback, handleError);
}

google.setOnLoadCallback(_run);
</script>
</head>

<body>
<div id="container">
  <div class="display">
      <div class="largeItem"/>
      <div id="footer"/>
  </div>
</div>
</body>
</html>
